<template>

  <div style="height: 80%; overflow: hidden; background-color: #320841ba">
    <div ref="div2" style="height: 100%; position:relative" :style="styles">
      <div v-for="(v, index) in item.data"
           style=""
           class="content2" :key="index">
        <div style="display: inline-block;
                    height: 96%;
                    padding-top: 4%;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    padding-left: .5rem;"
            :style="{'background-color': v.surplus == 0 ? 'red': v.surplus <=sill ? 'yellow': 'green'}">
          <span>{{ v.itemAbbr }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "scroll",
  props: ['item', 'sill'],
  data() {
    return {
      styles: {}
    }
  },
  mounted() {
    //自动滚动
    this.scorll()
  },
  methods: {
    scorll() {
      if (this.item.data) {
        if (this.item.data.length > 4) {
          console.log(this.item.name, "打印", this.item.data.length);
          let num = this.item.data.length - 4
          let i = 1
          setInterval(() => {
            this.styles = {
              top: '-' + i * 25 + '%'
            }
            if (i == num) {
              i = 0
              return
            }
            i++
          }, 1500)
        }
      }
    }
  }
}
</script>

<style scoped>
.content2 {
  width: 100%;
  height: 25%;
  /*margin: 1% 0;*/
  font-size: 0.3rem;
  color: black;
  border-bottom: 1px #0f1325 solid
}
</style>
